<template>
  <view class="container gray_bg order_detail">
    <tm-sheet :margin="[16, 20]" :round="3" :shadow="2">
      <view class="order_process">
        <view class="process_text">当前进度</view>
        <view class="process_value" @click="checkOrderFlow">
          <view class="flow_text">
            <text class="cus_dot"></text>
            <text>{{orderInfo.step_text}}</text>
          </view>
          <tm-icon :userInteractionEnabled="false" :font-size="24" color="#8091A4" name="tmicon-angle-right"></tm-icon>
        </view>
      </view>
    </tm-sheet>

    <view class="detail_main">
      <view class="repair_info">
        <view class="cus_info_title">报修信息</view>
        <tm-sheet :margin="[16, 20]" :round="3" :shadow="2">
          <view class="repair_info_list">
          <view class="cus_item">
            <view class="cus_item_label">工单编号</view>
            <view class="cus_item_value">{{orderInfo.number}}</view>
          </view>
          <view class="cus_item">
            <view class="cus_item_label">工单来源</view>
            <view class="cus_item_value">{{orderInfo.refer_text}}</view>
          </view>
          <view class="cus_item">
            <view class="cus_item_label">所在项目</view>
            <view class="cus_item_value">{{orderInfo.community_name}}</view>
          </view>
          <view class="cus_item">
            <view class="cus_item_label">报修地址</view>
            <view class="cus_item_value">{{`${orderInfo.building_id}栋-${orderInfo.floor_id}层-（${orderInfo.merchant_name}）`}}</view>
          </view>
          <view class="cus_item">
            <view class="cus_item_label">上门时间</view>
            <view class="cus_item_value">{{orderInfo.order_start_date + ' ~' + moment(orderInfo.order_end_date).format('HH:mm') + '点'}}</view>
          </view>
          <view class="cus_item">
            <view class="cus_item_label">报修类型</view>
            <view class="cus_item_value">{{orderInfo.repair_type_text}}</view>
          </view>
          <view class="cus_item">
            <view class="cus_item_label">故障描述</view>
            <view class="cus_item_value">
              <view>{{orderInfo.description}}</view>
              <view>{{orderInfo.repair_tags_text}}</view>
            </view>
          </view>
          <view class="cus_item_block">
            <view class="cus_item_label">故障视频/照片</view>
            <view class="cus_item_value upload_file">
              <view v-for="(item,i) in orderInfo.repair_imgs_arr" :key="i" class="upload_img">
                <view class="img_inner">
                  <tm-image :src="`${urlApi}${item}`"></tm-image>
                </view>
              </view>
            </view>
          </view>
        </view>
        </tm-sheet>
      </view>
     <view class="repair_part">
       <view class="cus_info_title">报修方</view>
       <tm-sheet :margin="[16, 20]" :round="3" :shadow="2">
        <view class="repair_part_list">
         <view class="cus_item">
           <view class="cus_item_label">工单来源</view>
           <view class="cus_item_value">
             <tm-tag color="green" size="m" :label="orderInfo.refer_text"></tm-tag>
             <view>{{orderInfo.merchant_name}}</view>
           </view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">姓名</view>
           <view class="cus_item_value">{{orderInfo.create_user?.real_name}}</view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">手机号</view>
           <view class="cus_item_value">{{orderInfo.create_user?.phone}}</view>
           <view class="phone_icon" @click="() => phoneCall(orderInfo.create_user.phone)"><tm-icon fontSize="32" name="iconfont icon-dianhua"></tm-icon></view>
         </view>
       </view>
       </tm-sheet>
     </view>

     <view v-if="orderInfo.allot_user_id" class="design_info">
       <view class="cus_info_title">派单信息</view>
       <tm-sheet :margin="[16, 20]" :round="3" :shadow="2">
        <view class="design_info_list">
         <view class="cus_item">
           <view class="cus_item_label">派单人</view>
           <view class="cus_item_value">{{orderInfo.allot_user?.real_name}}</view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">手机号</view>
           <view class="cus_item_value">{{orderInfo.allot_user?.phone}}</view>
           <view class="phone_icon" @click="() => phoneCall(orderInfo.allot_user.phone)"><tm-icon fontSize="32" name="iconfont icon-dianhua"></tm-icon></view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">维修师傅</view>
           <view class="cus_item_value">{{orderInfo.dispose_user?.real_name}}</view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">手机号</view>
           <view class="cus_item_value">{{orderInfo.dispose_user?.phone}}</view>
           <view class="phone_icon" @click="() => phoneCall(orderInfo.dispose_user.phone)"><tm-icon fontSize="32" name="iconfont icon-dianhua"></tm-icon></view>
         </view>
       </view>
       </tm-sheet>
     </view>
     <view v-if="orderInfo.dispose_user_id" class="maintence_info">
       <view class="cus_info_title">维修信息</view>
       <tm-sheet :margin="[16, 20]" :round="3" :shadow="2">
         <view class="maintence_info_list">
         <view class="cus_item">
           <view class="cus_item_label">维修方式</view>
           <view class="cus_item_value">{{orderInfo.dispose_type_text}}</view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">预估收费金额</view>
           <view class="cus_item_value">{{orderInfo.order_price}}</view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">租客确认签字</view>
           <view class="cus_item_value">
             {{orderInfo.signature_time ? '已签字' : '-'}}
           </view>
         </view>
         <view class="cus_item">
           <view class="cus_item_label">工单完成时间</view>
           <view class="cus_item_value">{{orderInfo.finished_at}}</view>
         </view>
         <view class="cus_item_block">
           <view class="cus_item_label">维修凭证</view>
           <view class="cus_item_value upload_file">
             <view v-for="(item,i) in orderInfo.dispose_imgs_arr" :key="i" class="upload_img">
               <view class="img_inner">
                 <tm-image :src="`${urlApi}${item}`"></tm-image>
               </view>
             </view>
           </view>
         </view>
       </view>
       </tm-sheet>
     </view>
      <view v-if="orderInfo.finished_at" class="complete_info">
        <view class="cus_info_title">完单信息</view>
        <tm-sheet :margin="[16, 20]" :round="3" :shadow="2">
         <view class="complete_info_list">
          <view class="cus_item">
            <view class="cus_item_label">工单审核状态</view>
            <view class="cus_item_value">{{orderInfo.step_text}}</view>
          </view>
          <view class="cus_item">
            <view class="cus_item_label">工单审核时间</view>
            <view class="cus_item_value">{{orderInfo.finished_at}}</view>
          </view>
          <view class="cus_item_block">
            <view class="cus_item_label">电子签名</view>
            <view class="cus_item_value">
              <tm-image v-if="orderInfo.merchant_signature" :width="92" :height="92" :src="`${urlApi}${orderInfo.merchant_signature}`"></tm-image>
            </view>
          </view>
        </view>
        </tm-sheet>
      </view>
    </view>

    <view class="cus_footer_btn">
      <tm-button v-if="orderInfo.step === 1" class="cancel_btn" @click="cancelOrderInfo" label="取消工单" round="25" color="#EA0000" outlined ></tm-button>
      <tm-button v-if="orderInfo.step === 1" label="修改工单" round="25" @click="editOrder"></tm-button>
      <tm-button v-if="orderInfo.step === 7" block  class="relaunch_btn" label="重新发起" round="25" @click="editOrder"></tm-button>
    </view>

<!--     进度弹框 -->
    <uni-popup ref="popupRef" type="bottom">
      <view class="popup_header">
        <view class="popup_header_title">
          当前进度
        </view>
        <view class="popup_close" @click="closePopup">×</view>
      </view>
      <view class="popup-content">
        <view class="head_title">
          <text class="title_text">工单编号：</text>
          <text class="title_number">{{orderInfo.number}}</text>
        </view>
        <view class="flow_section">

          <view-steps :steps="orderInfo.flow_list" activeColor="#00B42A" />
<!--          <tm-timeline reverse="true">-->
<!--            <tm-timeline-item v-for="(item, i) in orderInfo.flow_list"  color="green" :size="28" type="fill" :icon="i !== 0 ? 'tmicon-check': ''">-->
<!--             <view class="time_line">-->
<!--               <view class="line_top">-->
<!--                 <text class="line_title_text">{{item.title}}</text>-->
<!--                 <view class="line_title_value">-->
<!--                   <text class="line_operate">操作人：</text>-->
<!--                   <text class="line_operate_value">维修人</text>-->
<!--                 </view>-->
<!--               </view>-->
<!--               <view class="line_date">-->
<!--                 {{item.datetime}}-->
<!--               </view>-->
<!--             </view>-->
<!--            </tm-timeline-item>-->

<!--          </tm-timeline>-->
        </view>

      </view>
    </uni-popup>

    <!--     取消工单 -->
    <tm-picker
        @confirm="selectCancelType"
        :columns="cancelTypeOptions"
        v-model:model-str="show.pickerStr"
        v-model:show="showPicker"
        map-key="name"
        :default-value="show.pickerIndex"
        v-model="show.pickerIndex"
    ></tm-picker>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import moment from 'moment'
import { getOrderDetail, getDictionary, cancelOrder } from '@/api_request/api'
import {ASSETS_HOST} from '@/config'

const urlApi = ref<string>(ASSETS_HOST)

const popupRef = ref<any>(null)
const orderInfo = ref<any>({})

const cancelTypeOptions = ref<any>([])
const showPicker = ref(false)
const show = ref({
  pickerIndex: [0],
  pickerStr: ''
})
const steps = ref([
  [
    {
      text: '步骤一',
      desc: '描述信息',
    },
    {
      text: '步骤二',
      desc: '描述信息',
    },
    {
      text: '步骤三',
      desc: '描述信息',
    },
    {
      text: '步骤四',
      desc: '描述信息',
    },
  ],
])
// 取消工单
const cancelOrderInfo = () => {
  showPicker.value = true
}
const getOrderInfo = (id) => {
  getOrderDetail({id}).then((res: any) =>{
    console.log('jp======工单详情',res)
    orderInfo.value = {
      ...res.data,
      // flow_list: res.data?.flow_list.reverse()
    }
  })
}
const selectCancelType = async (val: any) => {
  const item = cancelTypeOptions.value[val]
  console.log('jp=======item',item)
  showPicker.value = false
  const {code, message} = await cancelOrder({cancel_type: item.id,cancel_content: '', id: orderInfo.value.id})
  if(code === 200) {
    uni.$showMsg('操作成功！')
    // 页面跳转 todo
    getOrderInfo(orderInfo.value.id)
    return
  }
  uni.$showMsg(message)

}
const initData = () => {
  getDictionary({id: 15}).then((res: any) => {
    console.log('jp======取消工单类型',res)
    cancelTypeOptions.value = res.data?.list
  })
}
initData()


  onLoad(async (options:any) => {
    console.log('jp======potions',options, options.id)
    if(options.id) {
      getOrderInfo(options.id)
    }
  })
const phoneCall = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone
  });
}

// 查看工单流程
const checkOrderFlow = () => {
  popupRef.value.open('bottom')
}
const closePopup = () => {
  popupRef.value.close()
}

// 修改工单
const editOrder = () => {
  uni.navigateTo({
    url: `/subpkg/create_repair/index?opType=edit&id=${orderInfo.value.id}`
  })
}


</script>
<style lang="scss" scoped>
  .order_detail{
    .order_process{
      display: flex;
      justify-content: space-between;
      .process_text{
        color: $cus-color-1;
      }
      .process_value{
        display: flex;
        align-items: center;
        .flow_text{
          display: flex;
          align-items: center;
          margin-right: 4px;
          color: $cus-color-8;
          .cus_dot{
            margin-right: 4px;
          }
        }
      }
    }
  }
  .cus_footer_btn{
    display: flex;
    justify-content: space-around;
  }
  .head_title{
    margin-bottom: 16px;
    .title_number{
      color: $cus-color-8;
    }
  }
  .flow_section{
    margin-left: -20px;
  }
  .line_top{
    display: flex;
    .line_title_text{
      margin-right: 8px;
      font-size: $cus-font-size-16;
    }
    .line_operate_value{
      color: $cus-color-8;
    }
  }
  .line_date,.line_operate {
    color: $cus-color-1;
  }
  .line_date{
    padding-top: 8px;
  }
  .relaunch_btn{
    width: 100%;
  }
</style>
